<template>
    <div v-if="visible">
        <div class="pop-container" :style="{left: posX + 'px', top: posY + 'px'}">
            <slot></slot>
        </div>
        <div class="pop-mask" :style="{background: backgroundColor}" @click.stop="closePop"></div>
    </div>
</template>
<script>
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        posX: {
            type: Number,
            default: 0
        },
        posY: {
            type: Number,
            default: 0
        },
        backgroundColor: {
            type: String,
            default: 'rgba(0, 0, 0, .5)'
        }
    },
    methods: {
        closePop() {
            this.$emit('close')
        }
    }
}
</script>

<style lang="less" scoped>
.pop-container {
    position: fixed;
    z-index: 101;
}
.pop-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
</style>
